<template>
	<view class="hospital-detail">
		<nav-bar :isHome="false"
			background="none" />
		<view class="hospital-detail-bg">
			<image :src="hospitalInfo.avatar_url"
				mode="scaleToFill"></image>
		</view>
		<view class="hospital-detail__main">
			<view class="hospital-detail__main-head">
				<view class="hospital-detail__main-head-top">
					<image class="h-avatar"
						:src="hospitalInfo.avatar_url"
						mode="scaleToFill"></image>
					<view class="hospital-detail__main-head-top-mid">
						<view class="">
							<view class="hospital-detail__main-head-top-mid-txt">
								{{hospitalInfo.name}}
							</view>

						</view>
						<view class="hospital-detail__main-head-top-mid-transform">
							<view class="hospital-detail__main-head-top-mid-transform-desc">
								<text>{{hospitalInfo.rank}}</text><text>{{hospitalInfo.label}}</text>
							</view>
							<text @click="handleShre"
								class="tranform-txt">转发 ></text>
						</view>
					</view>
					<view class="hospital-detail__main-head-top-address">
						<text class="iconfont icon-dingwei"></text>
						<view class="">
							{{hospitalInfo.address}}
						</view>
						<view @click="handleNavMap"
							class="hospital-detail__main-head-top-address-btn">
							导航 >
						</view>
					</view>
				</view>
			</view>

			<view class="hospital-detail__main-content">
				<view class="hospital-detail__main-content-title">
					<text>在线选择您需要的服务</text>
				</view>
				<view class="hospital-detail__main-content-item"
					v-for="item in servicesLists"
					:key="item.id">
					<image :src="item.logo_image_url"
						mode=""></image>
					<view class="hospital-detail__main-content-item-txt">
						<text class="hospital-detail__main-content-item-txt-title">
							{{item.name}}
						</text>
						<view class="hospital-detail__main-content-item-txt-desc">
							<text>
								{{item.intro}}
							</text>
						</view>
						<text class="hospital-detail__main-content-item-txt-price">
							<text class="extra">{{item.price}}</text> 元/次
						</text>

					</view>
					<view class="">
						<button :data-hid="hospitalInfo.id"
							:data-svid="item.id"
							type="primary"
							@click="handleToAppoint">
							预约
						</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 分享到 -->
		<uni-popup ref="popupRef"
			background-color="#fff"
			@change="change">
			<view class="popup-content">
				<view class="popup-content-title">
					<text @click="handleCloseShareModal"
						class="iconfont icon-close"></text>
					<text class="share-txt">转发分享</text>
				</view>
				<view class="popup-content-main">
					<view class="popup-content-main-wxin">
						<button open-type="share">
							<text class="iconfont icon-a-fenxiang2"></text>
							<view class="title">
								<text>发给微信好友</text>
							</view>
						</button>
					</view>
					<view class="popup-content-main-img">
						<text class="iconfont icon-weibiaoti1"></text>
						<view class="title">
							<text>生成分享图片</text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		getHospitalDetailInfoById
	} from '../../api'
	import {
		onLoad,
		onShareAppMessage
	} from '@dcloudio/uni-app'

	import utils from '../../utils';
	const app = getApp()
	const hospitalInfo = ref({})
	const servicesLists = ref({})
	onLoad(async (options) => {
		const {
			hid
		} = options
		const retData = await getHospitalDetailInfoById({
			hid
		})
		hospitalInfo.value = retData.data.hospital
		servicesLists.value = retData.data.services
	})
	const popupRef = ref(null)

	const handleShre = () => {
		popupRef.value.open('bottom')
	}

	const handleCloseShareModal = () => {
		popupRef.value.close()
	}

	onShareAppMessage(() => {
		return {
			title: hospitalInfo.value.name,
			path: '/pages/hospital/index?hid=' + hospitalInfo.value.id,
		}
	})

	const handleNavMap = () => {
		const data = uni.getStorageSync('cfg') && JSON.parse(uni.getStorageSync('cfg')) || {
			name: ""
		}
		// 使用在腾讯位置服务申请的key
		const key = app.globalData.key;
		// 调用插件的app的名称
		const referer = data.name;
		// 是否启用智能规划
		const enableAI = true;
		// 是否开启导航功能
		const navigation = 1;

		const {
			lat,
			lng
		} = utils.changeToTx(hospitalInfo.value.lat, hospitalInfo.value.lng)
		// 终点
		const endPoint = JSON.stringify({
			'name': hospitalInfo.value.name,
			'latitude': lat,
			'longitude': lng
		});
		// 个性化图层
		const layerStyle = 1;
		// https://lbs.qq.com/dev/console/application/mine
		//https://lbs.qq.com/miniProgram/plugin/pluginGuide/routePlan
		//https://mp.weixin.qq.com/wxamp/basicprofile/thirdauth?token=72407124&lang=zh_CN
		// 参考 api https://fuwu.weixin.qq.com/service/detail/00024cc78b8140578af86e6905b415
		// 注意：2.0.0需路径填改为route-plan
		wx.navigateTo({
			url: `plugin://route-plan/index?key=${key}&referer=${referer}&endPoint=${endPoint}&enableAI=${enableAI}&navigation=${navigation}&layerStyle=${layerStyle}`,
		});
	}

	const handleToAppoint = e => {
		const {
			hid,
			svid
		} = e.currentTarget.dataset

		uni.navigateTo({
			url: "/pages/service/index?hid=" + hid + "&svid=" + svid
		})
	}
</script>

<style lang="scss"
	scoped>
	.hospital-detail {
		&-bg {
			height: 600rpx;
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;

			image {
				width: 100%;
				filter: blur(20px);
			}
		}

		&__main {
			position: relative;
			margin: 80rpx 20rpx;

			&-head {
				position: relative;
				height: 160rpx;
				background-color: #fff;
				border-radius: 10rpx;
				margin-bottom: 20rpx;

				.h-avatar {
					position: absolute;
					width: 120rpx;
					height: 120rpx;
					left: 20rpx;
					top: -60rpx;
					border-radius: 10rpx;
				}

				&-top {
					&-mid {
						position: absolute;
						// display: flex;
						left: 160rpx;
						top: -56rpx;
						right: 20rpx;


						&-txt {
							color: #fff;
							font-weight: bold;
							margin-bottom: 30rpx;
						}

						&-transform {
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-size: 24rpx;

							&-desc {
								font-weight: bold;
								color: darkgreen;
								display: flex;
								gap: 10rpx;
							}

							.tranform-txt {
								color: #999;
							}
						}
					}

					&-address {
						position: absolute;
						bottom: 20rpx;
						left: 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						right: 20rpx;
						font-size: 24rpx;
						color: #999;
						gap: 10rpx;

						&-btn {
							margin-left: auto;
						}
					}
				}
			}

			&-content {
				padding: 20rpx;
				background-color: #fff;

				&-title {
					font-weight: bold;
					font-size: 28rpx;
					color: #333;
				}

				&-item {
					margin: 40rpx auto;
					display: flex;
					justify-content: space-between;
					gap: 20rpx;
					align-items: center;

					image {
						width: 120rpx;
						height: 120rpx;
					}

					button {
						margin-left: auto;
						width: 120rpx;
						font-size: 24rpx;
					}

					&-txt {
						flex: 1;


						&-title {
							font-weight: bold;
						}

						&-desc {
							color: #999;
							font-size: 24rpx;
							margin: 10rpx 0;
						}

						&-price {
							font-size: 24rpx;
							color: green;

							.extra {

								font-weight: bold;
								font-size: 36rpx;
							}
						}
					}
				}
			}
		}
	}

	.popup-content {
		height: 300rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 30rpx;

		&-title {
			width: 100%;
			display: flex;
			height: 60rpx;
			justify-content: space-between;
			align-items: center;

			.share-txt {
				flex: 1;
				text-align: center;
				font-weight: bold;
			}

			.iconfont {
				text-align: left;
				width: 30rpx;
			}
		}


		&-main {
			display: flex;
			margin-top: 20rpx;
			width: 100%;

			&-wxin,
			&-img {
				flex: 1;
				text-align: center;
				margin: 20rpx;

				.iconfont {
					font-size: 60rpx;
				}

				.title {
					font-size: 24rpx;
					color: #999;
					margin-top: 20rpx;
				}
			}

			&-wxin {
				button:after {
					border: none;
				}

				button {
					background: none;
					position: relative;
					display: block;
					margin-left: auto;
					margin-right: auto;
					padding-left: 0px;
					padding-right: 0px;
					box-sizing: border-box;
					text-align: center;
					text-decoration: none;
					line-height: 1;
				}
			}
		}



	}
</style>